<template>
	<div class="module">
		<div class="item">
			<p class="title">影厅{{data.name}}：</p>
			<ul class="ul-panel">
				<li class="li-item" v-for="(item, index) in list" :key="index" @click="clickType(item, index)" :class="typeIndex == index? 'active': ''">{{item.name}}({{item.count}})</li>
			</ul>
		</div>
	</div>
</template>

<script>
import roomService from '@/network/service/roomService.js'
import reserveService from '@/network/service/reserveService.js'
export default {
	props: ['data','scales', 'status', 'index', 'isReserve'],
	data() {
		return {
			typeIndex: 0,
			list: [],
		}
	},
	mounted() {
		if (this.isReserve == true) {
			this.getReserveDimension()
		} else {
			if (this.data.name == '状态') {
				this.getRoomStatusList();
			} else {
				this.getDimensionDetails();
			}
		}
	},
	watch: {
		'status': function() {
			if (this.isReserve == true) {
				this.getReserveDimension()
			} else {
				this.getDimensionDetails();
			}
		}
	},
	methods: {
		clickType(item,index) {
			this.typeIndex = index;
			this.$emit('on-search', item, this.index);
		},

		getDimensionDetails() {
			let params = {
				dimensionId: this.data.did,
				scales: this.scales.join(','),
				status: this.status
			}
			roomService.getDimensionDetails(params).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.list = result.data;
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		getReserveDimension() {
			let params = {
				dimensionId: this.data.did,
				scales: this.scales.join(','),
				date: this.status
			}
			reserveService.getDimensionDetails(params).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.list = result.data;
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				console.log(error)
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		getRoomStatusList() {
			let params = this.scales.join(',')
			roomService.getRoomStatusList(params).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					result.data.map(item => {
						if (item.status == -1) {
							this.$set(item, 'name', '全部');
						} else if (item.status == 1) {
							this.$set(item, 'name', '空闲');
						} else if (item.status == 2) {
							this.$set(item, 'name', '清洁');
						} else if (item.status == 3) {
							this.$set(item, 'name', '使用');
						} else if (item.status == 4) {
							this.$set(item, 'name', '修理');
						} else if (item.status == 5) {
							this.$set(item, 'name', '锁定');
						}
					})
					this.list = result.data;
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试');
			})
		},
	}
}
</script>

<style scoped lang="less">
.module {
	margin-top: .2rem;
	.item {
		display: flex;
		align-items: center;
		margin: .1rem 0;
	}
	.title {
		display: inline-block;
	}
	.ul-panel {
		display: inline-block;
		.li-item {
			float: left;
			padding: .05rem .1rem;
			cursor: pointer;
		}
	}
}
.active {
	background: #CD2A86;
	border-radius: 3px;
	color: #ffffff;
}
</style>